import React from 'react';
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import {Tooltip} from "@material-ui/core";
import {useDispatch} from "react-redux";
import MenuDropDown from "../../../../Common/MenuDropDown/MenuDropDown";
import {selectDeselectVisMapping} from "../../../../../../../redux/reducers/editor";
import HelpIcon from "@material-ui/icons/Help";

export default function VizMappingChoices(props) {
  const {
    styles,
    vizDataInput,
    selectedVisualizationMapping,
    analysisMethodOutputsData
  } = props;

  // Local constants
  const dispatch = useDispatch();
  console.log('!selectedVisualizationMapping',selectedVisualizationMapping)
  console.log('!analysisMethodOutputsData',analysisMethodOutputsData)
  const handleChooseSelection = (label, value) => {
    let newSelectedVisualizationMapping = selectedVisualizationMapping;
    newSelectedVisualizationMapping = newSelectedVisualizationMapping.filter(a => a.inputPort.id !== vizDataInput.id);
    newSelectedVisualizationMapping.push({
      inputPort: vizDataInput,
      outputPort: value
    })
    dispatch(selectDeselectVisMapping(newSelectedVisualizationMapping));
  };

  return (
    <>
      <Grid container justify="space-between" alignItems="center" className={styles.gutterBottom}>
        <Grid item xs>
          <Grid container alignItems="center">
            <Typography >{vizDataInput.title}</Typography>
            <Tooltip arrow placement="right-start" title={
              <Typography >{vizDataInput.description}</Typography>
            }>
              <IconButton> <HelpIcon/> </IconButton>
            </Tooltip>
          </Grid>
        </Grid>
        <Grid item xs>
          <MenuDropDown
            displayLabel={"Analysis output"}
            showType={true}
            parameterName={"choiceInput"}
            boxType={"standard"}
            source={analysisMethodOutputsData.filter(a => a.type === vizDataInput.type)}
            value={selectedVisualizationMapping.filter(a => a.inputPort.id === vizDataInput.id).length !== 0 ?
              selectedVisualizationMapping.filter(a => a.inputPort.id === vizDataInput.id)[0].outputPort.title : ""}
            handleSelection={handleChooseSelection}
          />
        </Grid>
      </Grid>
    </>
  );
}
